<!-- 系统消息公告，提示当前被调度信息，点击放大为浮窗显示调度历史 -->
<template>  
  <div 
    v-if="messageVisible" 
    class="custom-message" 
    style="margin: auto;" 
    draggable="true" 
    @click="openDialog"
    @dragstart="dragStart($event)"
    @dragend="dragEnd($event)"
    :style="`left:${elLeft}px;top:${elTop}px`"
  >  
    <span class="icon">ⓘ</span>  
    当前被调度到的地点是：{{ message }}  
    <span v-if="showClose" @click.stop="closeMessage" class="close-btn">×</span>  
  </div>

  <!-- 显示该警员历史调度信息的弹窗 -->
  <el-dialog  
      title="调度历史"  
      v-model="dialogVisible"  
      width="50%"  
      :before-close="closeDialog">  
      <div>  
        <el-table :data="taskHistory">
          <el-table-column property="tid" label="管理员号" width="120" />
          <el-table-column property="place" label="地点" width="160" />
          <el-table-column property="finished" label="是否完成" width="120" />
          <el-table-column property="starttime" label="开始时间" width="150" />
          <el-table-column property="endtime" label="结束时间"/>
        </el-table>
      </div>  
    </el-dialog>  
</template>  
  
<script>  
import { io } from 'socket.io-client'
  
export default {  
  props: {  
    // 假设你不再从父组件传递 message，因为它将由 socket 更新  
    showClose: {  
      type: Boolean,  
      default: true  
    },  
    duration: {  
      type: Number,  
      default: 0  
    },  
    // 可以添加一个 prop 来指定 socket 的 URL  
    socketUrl: {  
      type: String,  
      required: true,
      default: "http://1.92.204.101"
    }  
  },  
  data() {  
    return {  
      messageVisible: true,  
      message: '无', // 初始消息
      socket: null, // 用于存储 socket 实例  
      dialogVisible: false,  
      taskHistory: [],
      email: '',
      //拖拽设置
      dragging: false,
      initialWidth: 0, // 父元素的宽-自适应值
      initialHeight: 0, // 父元素的高-自适应值
      startclientX: 0, // 元素拖拽前距离浏览器的X轴位置
      startclientY: 0, //元素拖拽前距离浏览器的Y轴位置
      elLeft: 600, // 元素的左偏移量
      elTop: 10 // 元素的右偏移量
    };  
  },
  methods: {   
    closeMessage() {  
      this.visible = false; 
      if (this.socket) {  
        this.socket.disconnect() // 断开 socket 连接  
      }  
    },  
    startAutoClose() {  
      if (this.duration > 0) {  
        setTimeout(() => {  
          this.close()
        }, this.duration)  
      }  
    },  
    // 页面初始化
    initBodySize() {
      this.initWidth = this.$refs.clientWidth // 拿到父元素宽
      this.initHeight = this.initWidth * ((1080 * 0.88) / (1920 - 1080 * 0.02)) // 根据宽计算高实现自适应
    },
    // 拖拽开始事件
    dragStart(event) {
      this.dragging = true
      // 记录拖拽元素初始位置
      this.startclientX = event.clientX
      this.startclientY = event.clientY
    },
    // 拖拽结束事件
    dragEnd(event) {
      this.dragging = false
      // 计算偏移量
      let x = event.clientX - this.startclientX
      let y = event.clientY - this.startclientY
      // 实现拖拽元素随偏移移动
      this.elLeft += x
      this.elTop += y
    },
    connectSocket() {  
      // 创建 socket 连接  
      this.socket = io(this.socketUrl)
      // 监听服务器发送的消息  
      this.socket.on('message', (data) => {  
        this.message = data // 更新 message 数据  
      });  
  
      // 你可以添加更多的事件监听器...  
  
      // 当 socket 断开连接时，可以选择重新连接或做其他处理  
      this.socket.on('disconnect', () => {  
        console.log('Socket disconnected')  
        // 根据需要重新连接或处理  
      });  
    },  

    fetchTasks() {
      console.log('current email:', this.email) // 打印当前搜索用户的邮箱
        this.axios.get(`https://apifoxmock.com/m1/4767131-4420546-default/task/get_task_history`,
         { params: { email:this.email} })
        .then(response => {
          if (Array.isArray(response.data.taskHistory)) {
             console.log("Result data is an array:", response.data.taskHistory)
            this.taskHistory = response.data.taskHistory // 确保 taskHistory 是数组
          } else {
            this.taskHistory = []; // 如果没有匹配结果，清空 taskHistory
            console.error('Error: Expected an array but got:', response.data.taskHistory)
          }
        })
        .catch(error => {
          this.taskHistory = [] // 请求出错时也清空 taskHistory
          console.error('Error searching taskHistory:', error)
        });
    },
    openDialog() {  // 点击消息
        this.fetchTasks()
        this.dialogVisible = true
    }, 
    closeDialog() {
      this.dialogVisible = false // 关闭弹窗  
    },
  },  
  mounted() {  
    this.initBodySize()

    // this.connectSocket(); // 组件挂载时连接 socket  
    this.startAutoClose()
    // 在组件挂载时尝试从sessionStorage中获取用户信息  
    const userInfo/*String*/ = sessionStorage.getItem('userInfo')
    if (userInfo/*String*/) {  
      try {  
        // 将JSON字符串解析为对象  
        //const userInfo = JSON.parse(userInfoString); 
        console.log(userInfo/*.email*/)
      } catch (error) {  
        console.error('Error parsing userInfo from sessionStorage:', error)
      }  
      this.email = userInfo/*.email*/
    }  else {  
      console.log('No user info found in sessionStorage.')
    }
  },  
  beforeUnmount() {  
    // 组件销毁前断开 socket 连接  
    if (this.socket) {  
      this.socket.disconnect()
    }  
  }  
};  
</script>  
    
  <style scoped>  
  .icon {
    position: absolute;  
    top: 10px;  
    left: 5px;  
    cursor: move;  
  }
  .custom-message {  
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 15px;
    border-radius: 4px;  
    background-color: #000000;  
    color: #ffa600;  
    position: fixed; 
    cursor: move; /* 添加光标样式，表明可以拖拽 */
  }  
  .close-btn {  
    position: absolute;  
    top: 10px;  
    right: 2px;  
    cursor: pointer;  
  }  
  .custom-message:hover {
    background-color: #414141;  
  }
  .custom-message.dragging {
      opacity: 0.7;
  }
  </style>